{extend name="articles" /}

{block name="content"}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <h1 data-aos="fade-up">分类：{$category.name ?: '未分类'}</h1>
        <p data-aos="fade-up" data-aos-delay="100">{$category.description ?: '查看该分类下的所有文章'}</p>
        <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="200">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="/index.html">首页</a></li>
                <li class="breadcrumb-item"><a href="/articles.html">新闻动态</a></li>
                <li class="breadcrumb-item active" aria-current="page">{$category.name ?: '未分类'}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <div class="article-list">
                {carefree:article typeid='$category.id' limit='10' order='create_time desc' id='article' empty='<div class="text-center py-5" data-aos="fade-up"><i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i><p class="mt-3 text-secondary">该分类下暂无文章</p></div>'}
                <article class="article-card" data-aos="fade-up">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img src="{$article.cover_image ?: '/assets/images/placeholder/article.svg'}" alt="{$article.title}" class="article-image">
                        </div>
                        <div class="col-md-7">
                            <div class="article-content">
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-person"></i> {$article.author_name ?: '管理员'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                </div>
                                <h3><a href="/article/{$article.id}.html">{$article.title}</a></h3>
                                <p class="article-summary">{$article.summary ?: $article.content_preview}...</p>
                                {notempty name="article.tags"}
                                <div class="article-tags">
                                    {volist name="article.tags" id="tag"}
                                    <a href="/tag-{$tag.id}.html" class="article-tag">{$tag.name}</a>
                                    {/volist}
                                </div>
                                {/notempty}
                                <a href="/article/{$article.id}.html" class="read-more">
                                    阅读全文 <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                {/carefree:article}
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 分类信息 -->
            <div class="sidebar-widget" data-aos="fade-up">
                <div class="widget-header">
                    <h3><i class="bi bi-folder-fill"></i> 分类信息</h3>
                </div>
                <div class="category-info">
                    <p class="text-secondary">{$category.description ?: '暂无描述'}</p>
                    <div class="info-stats">
                        <div class="stat-item">
                            <span class="stat-label">文章数</span>
                            <span class="stat-value">{$category.article_count ?: 0}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 引入公共侧边栏 -->
            {include file="sidebar" /}
        </div>
    </div>
</div>
{/block}
